<template>
    <view
        v-if="showClone"
        :class="'l-status-container l-class ' + (fullScreenClone ? 'content' : '')"
        :style="'background:' + bgColorClone + ';' + (fullScreenClone ? 'align-items:center;' : '')"
        mut-bind:tap="tapStatusShow"
    >
        <block v-if="custom">
            <slot />
        </block>
        <block v-else>
            <image v-if="imageClone" :class="'left-img l-image-class ' + (fullScreenClone ? 'image_margin_top' : '')" :src="imageClone"></image>
            <image
                v-else
                :class="
                    (typeClone == 'success' || typeClone == 'error' ? 'left-img' : 'top-img') +
                    ' ' +
                    (typeClone == 'address' ? 'ad-img' : '') +
                    ' l-image-class ' +
                    (fullScreenClone ? 'image_margin_top' : '')
                "
                :src="typeImage"
            ></image>
            <text v-if="describeClone" class="status-text l-describe-class">{{ describeClone }}</text>
            <text v-else class="status-text l-describe-class">{{ typeText }}</text>
            <l-button l-class="l-button-class button_margin_top" v-if="buttonTextClone">
                <view>{{ buttonTextClone }}</view>
            </l-button>
            <l-button l-class="l-button-class button_margin_top" v-if="!buttonTextClone && typeClone === 'network'">
                <view>重新加载</view>
            </l-button>
            <l-button l-class="l-button-class button_margin_top" v-if="!buttonTextClone && typeClone === 'cart'">
                <view>去逛逛</view>
            </l-button>
        </block>
    </view>
</template>

<script>
import lButton from '../button/index';
export default {
    data() {
        return {
            typeImage: '',
            describeClone: '',
            typeText: '',
            buttonTextClone: '',
            showClone: '',
            fullScreenClone: false,
            bgColorClone: '',
            imageClone: '',
            typeClone: ''
        };
    },
    externalClasses: ['l-class', 'l-image-class', 'l-button-class', 'l-describe-class'],
    props: {
        show: Boolean,
        type: {
            type: String,
            default: 'success'
        },
        image: String,
        describe: String,
        buttonText: String,
        bgColor: {
            type: String,
            default: '#fff'
        },
        fullScreen: {
            type: Boolean,
            default: true
        },
        openApi: {
            type: Boolean,
            default: true
        },
        custom: {
            type: Boolean,
            default: false
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    methods: {
        attached() {
            this._changeStatus();
            if (this.openApi) {
                this._init();
            }
        },

        _init() {
            uni.lin = uni.lin || {};
            uni.lin.showStatusShow = (e) => {
                const {
                    type: t = 'success',
                    image: a = '',
                    describe: s = '',
                    buttonText: i = '',
                    bgColor: r = '#fff',
                    fullScreen: o = true
                } = {
                    ...e
                };
                this.setData({
                    showClone: true,
                    typeClone: t,
                    imageClone: a,
                    describeClone: s,
                    buttonTextClone: i,
                    bgColorClone: r,
                    fullScreenClone: o
                });
            };
            uni.lin.hideStatusShow = () => {
                this.setData({
                    showClone: false
                });
            };
        },

        _changeStatus() {
            switch (this.typeClone) {
                case 'success':
                    this.setData({
                        typeImage: '/static/miniprogram_npm/lin-ui/status-show/image/success.png',
                        typeText: '操作成功~'
                    });
                    break;
                case 'error':
                    this.setData({
                        typeImage: '/static/miniprogram_npm/lin-ui/status-show/image/error.png',
                        typeText: '操作失败~'
                    });
                    break;
                case 'cart':
                    this.setData({
                        typeImage: '/static/miniprogram_npm/lin-ui/status-show/image/cart.png',
                        typeText: '购物车空空如也，去逛逛吧~'
                    });
                    break;
                case 'order':
                    this.setData({
                        typeImage: '/static/miniprogram_npm/lin-ui/status-show/image/order.png',
                        typeText: '您暂时还没有订单哦~'
                    });
                    break;
                case 'network':
                    this.setData({
                        typeImage: '/static/miniprogram_npm/lin-ui/status-show/image/network.png',
                        typeText: '糟糕！网络错误~'
                    });
                    break;
                case 'address':
                    this.setData({
                        typeImage: '/static/miniprogram_npm/lin-ui/status-show/image/address.png',
                        typeText: '您暂时还没有地址哦~'
                    });
                    break;
                case 'product':
                    this.setData({
                        typeImage: '/static/miniprogram_npm/lin-ui/status-show/image/product.png',
                        typeText: '暂时还没有商品哦~~'
                    });
                    break;
                case 'data':
                    this.setData({
                        typeImage: '/static/miniprogram_npm/lin-ui/status-show/image/data.png',
                        typeText: '暂时还没有相关数据哦~~'
                    });
                    break;
                default:
                    console.warn(this.typeClone + ' is not a valid value');
            }
        },

        tapStatusShow() {
            this.$emit(
                'lincorvertap',
                {
                    detail: {}
                },
                {
                    bubbles: true,
                    composed: true
                }
            );
        }
    },
    created: function () {}
};
</script>
<style>
.l-status-container {
    background-color: #fff;
    flex-direction: column;
    display: flex;
    justify-content: center;
}
.content {
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    height: 100%;
    width: 100%;
}
.ad-img {
    width: 198rpx !important;
    height: 204rpx !important;
}
.top-img {
    width: 264rpx;
    height: 204rpx;
}
.left-img {
    width: 120rpx;
    height: 184rpx;
}
.image_margin_top {
    margin-top: -250rpx;
}
.status-text {
    font-size: 30rpx;
    color: #45526b;
    margin-top: 40rpx;
}
.button_margin_top {
    margin-top: 80rpx;
}
</style>
